<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        textarea {
            width: 300px;
            resize: none;
            background: #f5f5f5;
            border-radius: 4px;
            padding: 10px;
            height: 50px;
            margin-top: 10px;

        }

        input {
            margin-bottom: 20px;
        }
    </style>
</head>

<body>
    <button class="forward">前进</button>
    <br><br>
    <form action="./11-古诗词展示页.html">
        标题<br>
        <input type="text" name="title" class="title"><br>
        作者<br>
        <input type="text" name="author" class="author"><br>
        <textarea class="tx" name="contents" id="" cols="30" rows="10" placeholder="诗句请用逗号隔开"></textarea><br>
        <button class="btn">添加</button>
    </form>
    <script>
        let poems = [
            {
                title: '静夜思',
                author: '李白',
                contents:
                    '床前明月光,疑是地上霜,举头望明月,低头思故乡。'


            },
            {
                title: '春晓',
                author: '孟浩然',
                contents: [
                    '春眠不觉晓，处处闻啼鸟。',
                    '夜来风雨声，花落知多少。'
                ]

            },

            {
                title: '咏柳',
                author: '贺知章',
                contents: [
                    '碧玉妆成一树高，万条垂下绿丝绦。',
                    '不知细叶谁裁出，二月春风似剪刀。'
                ]

            }
        ]
        document.querySelector('.btn').addEventListener('click', function () {
            const title = document.querySelector('.title')
            const author = document.querySelector('.author')
            const contents = document.querySelector('.tx')

            //存储到数组
            let po = {
                title: title.value,
                author: author.value,
                contents: contents.value
            }
            //存储到本地
            let poems = JSON.parse(localStorage.getItem('poems')) || []
            poems.push(po)

            //更新本地存储
            localStorage.setItem('poems',JSON.stringify(poems))
        })

 
        
    </script>
</body>

</html>